<template>
  <div>
    <div class="order-summary-card">
      <div class="flex">
        <div class="title">
          利润分布明细表
          <span class="date-range">{{ formatDateRange }}</span>

          <span class="total-box " v-if="activeSegment === 'beixiaoyuangong'">
            <el-select class="bumen" collapse-tags v-model="selected" @change="multipleChange" multiple filterable clearable placeholder="选择被销员工">
              <el-option v-for="(item,i) in tableData.filter(r=>r.yuangongName)" :value="item.yuangongName" :label="item.yuangongName" :key="i"></el-option>
            </el-select>
            <span>总利润：<span>¥ {{ totalSaleprofits }}</span></span>
            <span>总单量：<span>{{ totalSaleCot }}</span></span>
          </span>

        </div>
      </div>
    </div>
    <div class="app-container table_box " v-loading="loading">
      <el-table stripe align="center" v-sticky-header="{ offsetTop: 0 }" :data="records">
        <el-table-column align="center" :label="statusMap[activeSegment].name" prop="gameName">
          <template slot-scope="scope">
            <span v-if="activeSegment === 'youxi'">{{ scope.row.gameName }}</span>
            <span v-if="activeSegment === 'xiaoshourenyuan'">{{ scope.row.yuangongName }}</span>
            <span v-if="activeSegment === 'beixiaoyuangong'">{{ scope.row.yuangongName }}</span>
            <span v-if="activeSegment === 'huishoujiawei'">{{ scope.row.yuangongName }}</span>
            <span v-if="activeSegment === 'xiaoshoushijian'">{{ scope.row.yuangongName }}</span>
            <span v-if="activeSegment === 'qudao'">{{ scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="总利润" sortable prop="saleprofits" />
        <el-table-column align="center" label="平均利润" sortable prop="avg" />
        <el-table-column align="center" label="订单数量" sortable prop="saleCot" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  props: {
    activeSegment: {
      type: String,
      default: "youxi",
    },
    formatDateRange: {
      type: [Array, String],
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      loading: false,
      formData: {},
      // 状态映射
      statusMap: {
        youxi: { name: "游戏" },
        qudao: { name: "渠道" },
        xiaoshourenyuan: { name: "销售员工" },
        beixiaoyuangong: { name: "被销员工" },
        huishoujiawei: { name: "回收价位" },
        xiaoshoushijian: { name: "销售时间" },
      },
      records: [],
      /**2025-08-11 cwh 增加 */
      selectOptions: [], //多选被销员工选择项
      selected: [], //选中的
      totalSaleprofits: 0, //总利润
      totalSaleCot: 0, //总单量
    };
  },
  // computed: {
  //     records() {
  //         return this.tableData || [];
  //     }
  // },

  watch: {
    tableData: {
      handler(newData) {
        // 表格数据更新时会自动重新渲染
        this.records = newData || [];
        this.selected = [];
        this.multipleChange();
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    // 更新表格数据的方法
    updateTableData(tableData) {
      // 数据通过 props 传递，会自动更新
    },
    // 多选改变  改变表格数据  计算总利润  总单量
    multipleChange(val) {
      if (this.activeSegment === "beixiaoyuangong") {
        let resultArr = [];
        this.totalSaleprofits = 0;
        this.totalSaleCot = 0;
        // 筛选找出符合员工名称的数据
        if (val && val.length) {
          resultArr = this.tableData.filter((r) =>
            val.includes(r.yuangongName)
          );
        } else {
          resultArr = this.tableData;
        }
        this.records = resultArr
        // 计算总利润
        if (resultArr && resultArr.length) {
          resultArr.forEach((r) => {
            this.totalSaleprofits += Number(r.saleprofits);
            this.totalSaleCot += Number(r.saleCot);
          });
          this.totalSaleprofits = Math.round(this.totalSaleprofits*100)/100
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  min-height: auto;
}

.order-summary-card {
  margin-top: 16px;
  padding: 0 24px 12px 24px;

  .flex {
    justify-content: space-between;
    align-items: center;
  }
}

.segmented-control {
  display: flex;
  background: #f4f4f4;
  border-radius: 50px;
  padding: 4px;
  width: fit-content;
}

.segment {
  min-width: 80px;
  text-align: center;
  padding: 4px 0;
  border-radius: 50px;
  font-size: 14px;
  color: #222;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;

  &.active {
    background: #6c5dd3;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px #e6f0ff;
  }

  &:not(.active):hover {
    background: #ececec;
  }
}

.export {
  margin-left: 6px;
  padding: 8px;
  background: #f4f4f4;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #222;

  .date-range {
    font-size: 13px;
    color: #888;
    margin-left: 8px;
  }
}
.total-box {
  padding-left: 15px;
  > span {
    margin-left: 15px;
    font-size: 14px;
    color: #666;
    font-weight: 400;

    > span {
      font-size: 20px;
      color: #6c5dd3;
    }
  }
}
.app-container {
  overflow: visible !important;
  min-height: auto;
}
::v-deep .el-select .el-tag{
    max-width: 120px;
  }
</style>